<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
</head>

<body style="padding: 100px;" onload="initUserList()">

    <button class="btn btn-primary" data-toggle="modal" data-target="#myModalAdd">新增</button>
    <button class="btn btn-primary" id="del" onclick="delItem()">删除</button>
    <button class="btn btn-primary" id="edit" onclick="editItem()">编辑</button>
    <button class="btn btn-primary" id="query" onclick="initUserList()">查询</button>
    <button class="btn btn-default"  data-toggle="modal" data-target="#myModalFindById">按工号查询</button>
    <button class="btn btn-default" data-toggle="modal" data-target="#myModalFindByName">按姓名查询</button><br><br>

    <table class="table">
        <thead>
            <tr>
                <th>序号</th>
                <th>工号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>密码</th>
                <th>年龄</th>
                <th>出生日期</th>
            </tr>
        </thead>

        <tbody>
        </tbody>
    </table>


    <!--  新增弹框 -->
    <div class="modal" id="myModalAdd" data-backdrop="static">
        <!-- 窗口声明 -->
        <div class="modal-dialog">
            <!-- 内容声明 -->
            <div class="modal-content">

                <!-- 1.框的标题 -->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">新增</h4>
                </div>
                <!-- 2.框内信息 -->
                <div class="modal-body">

                    <div class="form-group">
                        工号：
                        <input type="text" id="addId">
                    </div>

                    <div class="form-group">
                        姓名：
                        <input type="text" id="addName">
                    </div>
                    <div class="form-group">
                        性别：
                        <input type="radio" name="addSex" value="男"> 男
                        <input type="radio" name="addSex" value='女'> 女
                    </div>
                    <div class="form-group">
                        密码：
                        <input type="text" id="addPassword">
                    </div>
                    <div class="form-group">
                        年龄：
                        <input type="text" name="" oninput="value=value.replace(/[^\d]/g,'')" id="addAge">
                    </div>
                    <div class="form-group">
                        出生日期：
                        <input type="date" id="addDate">
                    </div>


                </div>
                <!-- 3.框的按钮 -->
                <div class="modal-footer">
                    <button class="btn btn-info" id="add">确定</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <!--  编辑弹框 -->
    <div class="modal" id="myModalEdit" data-backdrop="static">
        <!-- 窗口声明 -->
        <div class="modal-dialog">
            <!-- 内容声明 -->
            <div class="modal-content">

                <!-- 1.框的标题 -->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">编辑</h4>
                </div>
                <!-- 2.框内信息 -->
                <div class="modal-body">

                    <div class="form-group">
                        工号：
                        <input type="text" id="editId">
                    </div>

                    <div class="form-group">
                        姓名：
                        <input type="text" id="editName">
                    </div>
                    <div class="form-group">
                        性别：
                        <input type="radio" name="editSex" value="男"> 男
                        <input type="radio" name="editSex" value='女'> 女
                    </div>
                    <div class="form-group">
                        密码：
                        <input type="text" id="editPassword">
                    </div>
                    <div class="form-group">
                        年龄：
                        <input type="text" name="" oninput="value=value.replace(/[^\d]/g,'')" id="editAge">
                    </div>
                    <div class="form-group">
                        出生日期：
                        <input type="date" id="editDate">
                    </div>


                </div>
                <!-- 3.框的按钮 -->
                <div class="modal-footer">
                    <button class="btn btn-info" id="editOk">确定</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <!--  按工号查询 弹框 -->
    <div class="modal" id="myModalFindById" data-backdrop="static">
        <!-- 窗口声明 -->
        <div class="modal-dialog">
            <!-- 内容声明 -->
            <div class="modal-content">

                <!-- 1.框的标题 -->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">按工号查询</h4>
                </div>
                <!-- 2.框内信息 -->
                <div class="modal-body">

                    <div class="form-group">
                        工号：
                        <input type="text" id="findByIdId">
                    </div>

                </div>
                <!-- 3.框的按钮 -->
                <div class="modal-footer">
                    <button class="btn btn-info" id="findByIdOk">确定</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <!--  按姓名查询 弹框 -->
    <div class="modal" id="myModalFindByName" data-backdrop="static">
        <!-- 窗口声明 -->
        <div class="modal-dialog">
            <!-- 内容声明 -->
            <div class="modal-content">

                <!-- 1.框的标题 -->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">按姓名查询</h4>
                </div>
                <!-- 2.框内信息 -->
                <div class="modal-body">

             
                    <div class="form-group">
                        姓名：
                        <input type="text" id="findByNameName">
                    </div>

                </div>
                <!-- 3.框的按钮 -->
                <div class="modal-footer">
                    <button class="btn btn-info" id="findByNameOk">确定</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>



    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script>


        var findResultList = [];

        var userList = [
            {
                check: false,
                id: '1001',
                name: '张三',
                sex: '女',
                password: '123',
                age: 29,
                birthday: '1991-01-01'
            }, {
                check: false,
                id: '1002',
                name: '李四',
                sex: '男',
                password: '123',
                age: 28,
                birthday: '1992-02-02'
            },
            {
                check: false,
                id: '1003',
                name: '王五',
                sex: '女',
                password: '123',
                age: 27,
                birthday: '1993-03-03'
            }
            , {
                check: false,
                id: '1004',
                name: '赵六',
                sex: '女',
                password: '123',
                age: 26,
                birthday: '1994-04-04'
            }];

        // 新增 model 的 确定按钮
        $("#add").click(
            function () {

                // 工号
                var id = document.getElementById('addId').value;
                // 姓名
                var name = document.getElementById('addName').value;
                // 性别
                var radio = document.getElementsByName('addSex');
                var sex = '';
                for (i = 0; i < radio.length; i++) {
                    if (radio[i].checked) {
                        sex = radio[i].value;
                    }
                }
                // 密码
                var password = document.getElementById('addPassword').value;
                // 年龄
                var age = document.getElementById('addAge').value;
                // 出生日期
                var date = document.getElementById('addDate').value;


                if (id == '') {
                    alert('请输入工号');
                    return;
                }


                if (name == '') {
                    alert('请输入姓名');
                    return;
                }

                if (sex == '') {
                    alert('请选择性别');
                    return;
                }


                if (password == '') {
                    alert('请输入密码');
                    return;
                }


                if (age == '') {
                    alert('请输入年龄');
                    return;
                }


                if (date == '') {
                    alert('请输入出生日期');
                    return;
                }

                console.log('id:' + id);
                console.log('name:' + name);
                console.log('sex:' + sex);
                console.log('date:' + date);


                // 清空数据
                document.getElementById('addId').value = '';
                document.getElementById('addName').value = '';
                for (i = 0; i < radio.length; i++) {
                    if (radio[i].checked) {
                        radio[i].checked = false;
                    }
                }
                document.getElementById('addPassword').value = '';
                document.getElementById('addAge').value = '';
                document.getElementById('addDate').value = '';


                userList = userList.concat({
                    check: false,
                    id: id,
                    name: name,
                    sex: sex,
                    password: password,
                    age: age,
                    birthday: date

                });

                // 更新 表格
                initUserList();

                $("#myModalAdd").modal('hide');  // 关闭model
            }
        );

        // 初始化表格
        function initUserList(dataList) {

            if(dataList == undefined){
                dataList = userList;
            }

            console.log(dataList);

            // 删除全部表格item
            $("tbody").children().remove();

            for (i = 0; i < dataList.length; i++) {

                // 表格 item 的 底部颜色
                var inputStyle;
                if (i % 2 == 0) {
                    inputStyle = "info";
                } else {
                    inputStyle = "warning";
                }

                var newTr = $("<tr class= " + inputStyle + " ><td><input type=\"checkbox\" onclick=\"itemClick(" + i + ")\"  ></td><td>" + dataList[i].id + "</td><td>" + userList[i].name + "</td><td>" + dataList[i].sex + "</td><td>" + dataList[i].password + "</td><td>" + dataList[i].age + "</td><td>" + dataList[i].birthday + "</td></tr>");
                $("tbody").append(newTr);

            }
        }

        // item 选中事件
        function itemClick(index) {
            // 更新 数据
            userList[index].check = !userList[index].check;
        }

        // 删除数据
        function delItem() {

            // 定义是否能够删除的标志
            var canDel = false;
            for (i = 0; i < userList.length; i++) {
                if (userList[i].check) {
                    canDel = true;
                    break;
                }
            }

            if (canDel) {
                var tempUserList = [];

                for (i = 0; i < userList.length; i++) {
                    console.log('userList[i]:' + userList[i]);
                    if (!userList[i].check) {
                        tempUserList = tempUserList.concat(userList[i]);
                    }
                }

                userList = tempUserList;

                initUserList();

            } else {
                alert("请先选中要删除的item");
            }
        }

        // 编辑数据 只支持 单条单条的编辑
        function editItem() {
            // 定义是否能够删除的标志
            var canEdit = false;
            var checkCount = 0;
            for (i = 0; i < userList.length; i++) {
                if (userList[i].check) {
                    canEdit = true;
                    checkCount++;
                }
            }

            if (canEdit) {
                if (checkCount > 1) {
                    alert("目前只支持单条编辑，请只选择一条数据进行编辑");
                } else {

                    for (i = 0; i < userList.length; i++) {
                        if (userList[i].check) {

                            document.getElementById("editId").value = userList[i].id;
                            document.getElementById("editName").value = userList[i].name;


                            var radio = document.getElementsByName("editSex");
                            for (y = 0; y < radio.length; y++) {

                                if (radio[y].value == userList[i].sex) {
                                    radio[y].checked = 'checked';
                                }
                            }

                            document.getElementById("editPassword").value = userList[i].password;
                            document.getElementById("editAge").value = userList[i].age;
                            document.getElementById("editDate").value = userList[i].birthday;


                            $("#myModalEdit").modal('show');  // 打开model
                            break;
                        }
                    }
                }
            } else {
                alert("请先选中要删除的item");
            }
        }

        // 编辑 model 的 确定按钮
        $("#editOk").click(
            function () {
                // 工号
                var id = document.getElementById('editId').value;
                // 姓名
                var name = document.getElementById('editName').value;
                // 性别
                var radio = document.getElementsByName('editSex');
                var sex = '';
                for (i = 0; i < radio.length; i++) {
                    if (radio[i].checked) {
                        sex = radio[i].value;
                    }
                }
                // 密码
                var password = document.getElementById('editPassword').value;
                // 年龄
                var age = document.getElementById('editAge').value;
                // 出生日期
                var date = document.getElementById('editDate').value;


                if (id == '') {
                    alert('请输入工号');
                    return;
                }


                if (name == '') {
                    alert('请输入姓名');
                    return;
                }

                if (sex == '') {
                    alert('请选择性别');
                    return;
                }


                if (password == '') {
                    alert('请输入密码');
                    return;
                }


                if (age == '') {
                    alert('请输入年龄');
                    return;
                }


                if (date == '') {
                    alert('请输入出生日期');
                    return;
                }

                for (i = 0; i < userList.length; i++) {
                    if (userList[i].check) {
                        userList[i].check = false;
                        userList[i].id = id;
                        userList[i].name = name;
                        userList[i].sex = sex;
                        userList[i].password = password;
                        userList[i].age = age;
                        userList[i].birthday = date;

                    }
                }

                console.log(userList);

                initUserList();

                $("#myModalEdit").modal('hide');  // 关闭model
            }
        );


        // 按工号查询 model 的 确定按钮
        $("#findByIdOk").click(
            function () {
                var id = document.getElementById('findByIdId').value;
                if (id == '') {
                    alert('请输入工号');
                    return;
                }

                // 清空数组
                findResultList.length = 0;

                for (y = 0; y < userList.length; y++) {
                    if (userList[y].id == id) {
                        findResultList = findResultList.concat(userList[y]);
                    
                    }
                }

                initUserList(findResultList);

                document.getElementById('findByIdId').value = '';

                $("#myModalFindById").modal('hide');  // 关闭model
            }
        )

        // 按姓名查询 model 的 确定按钮
        $("#findByNameOk").click(
            function () {
                var name = document.getElementById('findByNameName').value;
                if (name == '') {
                    alert('请输入姓名');
                    return;
                }

                // 清空数组
                findResultList.length = 0;

                for (y = 0; y < userList.length; y++) {
                    if (userList[y].name == name) {
                        findResultList = findResultList.concat(userList[y]);
                    }
                }

                initUserList(findResultList);

                document.getElementById('findByNameName').value = '';

                $("#myModalFindByName").modal('hide');  // 关闭model
            }
        )

    </script>
</body>

</html>